<%--
  Created by IntelliJ IDEA.
  User: Edward_yang
  Date: 2017/12/20 0020
  Time: 23:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp" %>
<!DOCTYPE html>
<body>
<style type="text/css">
    .grid{
        font:12px arial,helvetica,sans-serif;
        border: 0px solid #8DB2E3;width:950px;
        border-collapse:collapse;
    }
    .grid td{
        font:100% arial,helvetica,sans-serif;
        text-align: center;
        height:40px;
        border:1px solid #e0e0e0;
        padding-left:5px}
    .tdcc{
        height:40px;
        width: 80px;
        background-color: rgb(250,250,250);
    }
    .tdcc1{
        height:40px;
        width:150px;
    }
    .imgDelete{
        display: inline-block;
        height: 17px;
        width: 17px;
        border-radius: 50%;
        background-color: #888;
        text-align: center;
        color: #fff;
        line-height: 16px;
        font-size: 12px;
        cursor: pointer;
        position: absolute;
        right: -8px;
        top: -8px;
    }
    .dragItemBox{
        position: relative;margin-right: 10px;margin-top: 5px;float: left;
    }

    .searchTab{font:12px arial,helvetica,sans-serif;border:2px solid #e0e0e0}
</style>
<script type="text/javascript" src="${staticPath }/static/autoCompleteData.js" charset="utf-8"></script>
<script>
    var arrSrc = [];//初始一个数组存放图片路径
    $("#type_").val(${product.type});
    //初始化分类树
    $(function(){
        $('#categoryIds').combotree({
            url : '${path }/category/allTree.do',
            multiple: true,
            onlyLeafCheck:true,
            cascadeCheck : false,
            parentField : 'pid',
            lines : true,
            panelHeight : 'auto',
            onLoadSuccess:function(node,data){
                var checkedIds = "${product.categoryIds}";
                $('#categoryIds').combotree("setValues",checkedIds.split(","));
                buildLabels("${product.id}");
                buildAttrs("${product.id}");
            },
            onCheck:function(node, checked){
                if(node.children == 'undefined'|| node.children == null || node.children.length <= 0){
                    $("#labels").empty();
                    $("#attrs").empty();
                }
            }
        });
    });

    /**
     * 构建标签
     */
    function buildLabels(productId){
        var categoryIds = $("#categoryIds").combotree('getValues');
        if(categoryIds == null || categoryIds.length <= 0){
            $.messager.alert("系统提示", "先选择分类!","warning");
            return;
        }
        categoryIds = categoryIds.join(",");
        $("#labels").empty();
        $.ajax({
            type: "POST",
            dataType: "JSON",
            url:"${path }/label/buildLabelds.do?productId=" + productId,
            data: {"classifyIds": categoryIds},
            success: function(data){
                if(data.success){
                    $("#labels").append(data.msg);
                }
            },
            error:function(){
                $.messager.progress("close");
                $.messager.alert("构建标签失败", "服务器连接失败!","error");
            }
        });
    }

    /**
     * 构建属性
     */
    function buildAttrs(productId){
        var categoryIds = $("#categoryIds").combotree('getValues');
        if(categoryIds == null || categoryIds.length <= 0){
            $.messager.alert("系统提示", "先选择分类!","warning");
            return;
        }
        categoryIds = categoryIds.join(",");
        $("#attrs").empty();
        $.ajax({
            type: "POST",
            dataType: "JSON",
            url:"${path }/attribute/buildAttributes.do?productId=" + productId,
            data: {"classifyIds": categoryIds},
            success: function(data){
                if(data.success){
                    $("#attrs").append(data.msg);
                }
            },
            error:function(){
                $.messager.progress("close");
                $.messager.alert("构建属性失败", "服务器连接失败!","error");
            }
        });
    }

    //提交from数据
    function submitForm() {
        progressLoad();
        $.ajax({
            cache: true,
            type: "POST",
            url:"${path }/product/edit.do",
            data:$('#saveinfoProduct').serialize(),// 你的formid
            async: false,
            error: function(request) {
                progressClose();
                $.messager.alert("删除失败", "服务器连接失败!","error");
            },
            success: function(data) {
                progressClose();
                if (data.success) {
                    $.messager.alert("系统提示", "保存成功","info",function(){
                        closeWin('modelEdit');
                        reloadpProductDataGrid();
                    });

                }else{
                    progressClose();
                    $.messager.alert("系统提示", data.msg,"error");
                }
            }
        });

    }
</script>
<form id="saveinfoProduct">
<div class="easyui-tabs"  data-options="tabWidth:150"  style="width:100%;height:533px ;padding:0px">
    <div title="产品基本信息"  data-options="iconCls:'icon-edit'" style="padding:20px">
        <table class="grid">
            <p style="color: red" id="sellerOK">已选择商家:${seller.name}</p>
            <input type="hidden" name="id" id="" value="${product.id}">
            <input type="hidden" id="sellerId" name="sellerId" value="${product.sellerId}">
            <input type="hidden" id="areaIds" name="areaIds" value="${product.areaIds}">
            <tr>
                <td colspan="7">产品基本信息</td>
            </tr>
            <tr>
                <td class="tdcc">产品名称:</td>
                <td><input name="name" class="easyui-validatebox" data-options="required:true"  type="text" value="${product.name}"></td>
                <td class="tdcc">库存:</td>
                <td><input name="repertory" class="easyui-validatebox" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"  data-options="required:true"    type="text" value="${product.repertory}"></td>
                <td class="tdcc">是否需要验证码:</td>
                <td id="productInputs"><span>是:</span><input name="needVerificationCode" type="radio" value="1"><span>否</span><input name="needVerificationCode" type="radio" value="0"></td>
                    <script type="text/javascript">
                        $(function(){
                            $("#productInputs input:eq(${product.needVerificationCode})").attr("checked","checked");
                            $("#productInputs input").on("change",function () {
                                $("#productType").val($(this).val());
                            });
                        })
                </script>
            </tr>
            <tr>
                <td class="tdcc">原价:</td>
                <td><input name="originPrice" class="easyui-validatebox" data-options="required:true"  type="text" value="${product.originPrice}"></td>
                <td class="tdcc">现价:</td>
                <td><input name="price" type="text" class="easyui-validatebox" data-options="required:true"  value="${product.price}"></td>
                <td class="tdcc">虚拟销量:</td>
                <td><input name="virtualSalesCount"  class="easyui-validatebox" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"  data-options="required:true"   type="text" value="${product.virtualSalesCount}"></td>
            </tr>
            <tr>
                <td class="tdcc">虚拟预约人数:</td>
                <td><input name="virtualAppointmentCount" class="easyui-validatebox" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"  data-options="required:true"   type="text" value="${product.virtualAppointmentCount}"></td>
                <td class="tdcc">虚拟评论数量:</td>
                <td><input name="virtaulCommentCount" class="easyui-validatebox" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"  data-options="required:true"  type="text" value="${product.virtaulCommentCount}"></td>
                <td class="tdcc">虚拟收藏数:</td>
                <td><input name="virtualCollectAccount" class="easyui-validatebox" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"  data-options="required:true" type="text" value="${product.virtualCollectAccount}"></td>
            </tr>
            <tr>
                <td class="tdcc">(商家)省份:<input name="oneAreaId" type="hidden" value="${product.oneAreaId}"></td>
                <td><input name="oneAreaName" class="easyui-validatebox" data-options="required:true"  readonly="readonly"   type="text" value="${product.oneAreaName}"></td>
                <td class="tdcc">(商家)城市:<input name="twoAreaId" type="hidden" value="${product.twoAreaId}"></td>
                <td><input name="twoAreaName" class="easyui-validatebox" data-options="required:true"  readonly="readonly"   type="text" value="${product.twoAreaName}"></td>
                <td class="tdcc">(商家)区域:<input name="threeAreaId" type="hidden" value="${product.threeAreaId}"></td>
                <td><input name="threeAreaName" class="easyui-validatebox" data-options="required:true"  readonly="readonly"  type="text" value="${product.threeAreaName}"></td>
            </tr>
            <tr>
                <td class="tdcc">预约须知:</td>
                <td><select id="type_" name="type" style="width: 150px">
                    <option value="-1">请选择</option>
                    <option value="0">体检套餐</option>
                    <option value="1">线上体检卡</option>
                    <option value="2">线下体检卡</option>
                    <option value="3">邮寄产品</option>
                </select></td>
                <td class="tdcc"></td>
                <td></td>
                <td class="tdcc"></td>
                <td></td>
            </tr>
            <tr>
                <td colspan="2"  style=" height: 80px">预约须知:</td>
                <td colspan="5"  style=" height: 80px"><textarea  name="appointmentInform" class="easyui-validatebox"  style="width: 500px   ; height: 80px;resize:none;" placeholder="预约须知" >${product.appointmentInform}</textarea></td>
            </tr>
        </table>
    </div>
    <div title="产品标签\分类\属性"  data-options="iconCls:'icon-edit'" style="padding:20px">
        <table class="grid" align="center">
            <tr>
                <td>产品分类:</td>
                <td>
                    <select id="categoryIds" name="categoryIds" style="width: 200px; height: 29px;"></select>
                    <a href="javascript:void(0);"  class="easyui-linkbutton" onclick="buildLabels('${product.id}');">加载标签</a>
                    <a href="javascript:void(0);"  class="easyui-linkbutton" onclick="buildAttrs('${product.id}');">加载属性</a>
                </td>
            </tr>
            <tr>
                <td>产品标签:</td>
                <td id="labels"></td>
            </tr>
            <tr>
                <td>产品属性<br/><span style="color:red">属性用英文逗号隔开（红色,黄色,蓝色）</span>:</td>
                <td id="attrs"></td>
            </tr>
        </table>
    </div>

    <div title="产品图片"  data-options="iconCls:'icon-edit'" style="padding:20px">
        <script type="text/javascript">
            var productImg= "${product.img}"
            var imgsString= "${imgsString}"

            if(productImg){
                addImgSingle(productImg);
            }
            if(imgsString){
                var arr = imgsString.substring(0,imgsString.length-1).split(",");
                var arr2 = [];
                arr.map(function(ele,index){
                    arr2.push({src:ele})
                });
                addImgGroup(arr2);
            }


            //============================================单图============================================
            <%--删除图片点击事件--%>
            function deteleImgSingle(obj){
                $(obj).parents("#hospitalSingle").find("img").remove();
                $(obj).remove();
                $("#hospitalSingleInput").val("");
            }
            function addImgSingle(src){
                $("#hospitalSingle").html(
                    '<img src="'+src+'"   alt="商家图片" style="max-width:150px;max-height: 150px;border: 1px solid #eeeeee;">' +
                    '<span class="imgDelete" onclick="deteleImgSingle(this)">x</span>');
                $("#hospitalSingleInput").val(src);
            }

            var _editor2;
            //重新实例化一个编辑器，防止在上面的editor编辑器中显示上传的图片或者文件
            _editor2 = UE.getEditor('upload_ue2',{
                serverUrl:"${path}/file/upload.do?compress=1"
            });
            _editor2.ready(function () {
                //隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏
                _editor2.hide();
                //侦听图片上传
                _editor2.addListener('beforeInsertImage', function (t,arg) {

                    addImgSingle(arg[arg.length-1].src);
                });
            });
            //弹出单张图片上传的对话框
            function upImageSingle() {
                var myImage = _editor2.getDialog("insertimage");
                myImage.open();
            }

            //============================================多图============================================
            <%--删除图片点击事件--%>

            function deteleImgGroup(obj){
                // var src = $(obj).prev().attr("src");
                var index = $(obj).parent().index();
                $(obj).parent().remove();
                arrSrc.splice(index,1);
                $("#hospitalGroupInput").val(arrSrc.join(','));
            }
            function addImgGroup(arg) {
                arg.map(function(ele,index){
                    $("#hospitalGroup").append(
                        '<div class="dragItemBox">'+
                        '<img src="'+ele.src+'" alt="商家图片" style="max-width:150px;max-height: 150px;border: 1px solid #eeeeee;">'+
                        '<span class="imgDelete" onclick="deteleImgGroup(this)">x</span>'+
                        '</div>'
                    );
                    arrSrc.push(ele.src);
                });
//                        每次上传事件触发都重新绑定拖拽事件
                $('.dragItemBox').unbind('draggable');

                $('.dragItemBox').draggable({
                    deltaX:0,
                    deltaY:0
                }).droppable({
                    onDrop:function(e,source){
                        $(source).after(this);
                        $(source).removeAttr('style').siblings().removeAttr('style');
//                                顺序修改后需要重新修改上传的input值

                        arrSrc = [];
                        $(this).parent().find('.dragItemBox img').each(function(){
                            arrSrc.push($(this).attr('src'));
                        });
                        $("#hospitalGroupInput").val(arrSrc.join(","));


                    }
                });


                $("#hospitalGroupInput").val(arrSrc.join(","));
            }


            var _editor3;
            //重新实例化一个编辑器，防止在上面的editor编辑器中显示上传的图片或者文件
            _editor3 = UE.getEditor('upload_ue3',{
                serverUrl:"${path}/file/upload.do?compress=1"
            });


            _editor3.ready(function () {
                //隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏
                _editor3.hide();
                //侦听图片上传
                _editor3.addListener('beforeInsertImage', function (t,arg) {
                    addImgGroup(arg);
                });
            });
            //弹出单张图片上传的对话框
            function upImageGroup(){
                var myImage = _editor3.getDialog("insertimage");
                myImage.open();
            }
        </script>
        <div style="border: 1px solid #e0e0e0">
            <p>产品图片</p>
            <hr/>
            <table border="0">
                <tr>

                    <td><a href="javascript:void(0);"  class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="upImageSingle();">上传单张图片</a></td>
                </tr>
                <tr>
                    <td>
                        <div id="upload_ue2"></div>
                        <input type="hidden" id="hospitalSingleInput" name="img">
                        <div style="position: relative;float: left;margin-top: 5px;" id="hospitalSingle">

                        </div>
                    </td>
                </tr>
            </table>
            <p>产品轮播图片</p>
            <hr/>
            <table border="0">
                <tr>
                    <td><a href="javascript:void(0);"  class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="upImageGroup();">上传多张图片</a></td>
                </tr>
                <tr>
                    <td>
                        <div id="upload_ue3"></div>
                        <input type="hidden" id="hospitalGroupInput" name="imgsUrl">
                        <div id="hospitalGroup">

                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <style>
        .td1{
            border: 1px solid #e0e0e0;
            background-color: #e0e0e0;
            text-align: center;
            height: 60px;
        }
    </style>
    <div title="图文详情" data-options="iconCls:'icon-edit'" style="padding:20px">
        <table style=" border: 1px solid #e0e0e0;">
            <tr>
                <td class="td1"><h2>产品详情</h2></td>
            </tr>
            <tr>
                <td>
                    <div>
                        <textarea id="editor" style="height:400px;"  name="detail">${product.detail}</textarea>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="td1"><h2>体检须知</h2></td>
            </tr>
            <tr>
                <td>
                    <div>
                        <textarea id="editor1" style="height:400px;"  name="buyInfo">${product.buyInfo}</textarea>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="td1"><h2>预约流程</h2></td>
            </tr>
            <tr>
                <td>
                    <div>
                        <textarea id="editor2" style="height:400px;"  name="appointmentInfo">${product.appointmentInfo}</textarea>
                    </div>
                </td>
            </tr>
        </table>
        <script type="text/javascript">
            //实例化编辑器
            //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
            var ue = UE.getEditor('editor',{
                serverUrl:"${path}/file/upload.do"
            });
            //实例化编辑器
            //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
            var ue1 = UE.getEditor('editor1',{
                serverUrl:"${path}/file/upload.do"
            });
            //实例化编辑器
            //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
            var ue2 = UE.getEditor('editor2',{
                serverUrl:"${path}/file/upload.do"
            });
        </script>
    </div>
</div>
<div  data-options="region:'south',border:false" style="height: 24px; padding-top: 8px;text-align: center" >
    <a  class="easyui-linkbutton" icon="icon-save" onclick="submitForm()" >保存</a>
    <a  class="easyui-linkbutton" icon="icon-cancel" onclick="closeWin('modelEdit')" >取消</a>
</div>
</form>
</body>
</html>
